<template>
  <div>
    <a-layout id="components-layout-demo-fixed-sider" style="min-height: 100vh">
      <f-sider></f-sider>
      <a-layout>
        <f-header></f-header>
        <a-layout-content
          :style="{ margin: '24px 16px 0', overflow: 'initial' }"
        >
          <div :style="{ padding: '24px', background: '#fff' }">
            <a-row type="flex">
              <div class="title">媒体管理</div>
            </a-row>
            <a-row class="mt1r" type="flex" justify="space-between">
              <a-col class="disflex">
                <div>
                  <a-input-search
                    v-model="keyword"
                    placeholder="搜索"
                    style="width: 200px"
                    @search="onSearch"
                  />
                </div>
                <!-- <a-button type="primary" @click="addcate()">创建新产品分类</a-button> -->
              </a-col>
              <a-col>
                <a-button type="primary" @click="add()">创建新文件</a-button>
              </a-col>
            </a-row>
            <a-row class="mt1r" type="flex" justify="star">
              <a-card
                hoverable
                style="width: 300px; margin-bottom: 30px;margin-right:30px;"
                v-for="(item, index) in data"
                :key="index"
              >
                <div
                  @click="showImg(item.url)"
                  class="img"
                  slot="cover"
                  v-bind:style="{ backgroundImage: 'url(' + item.url + ')' }"
                ></div>
                <template slot="actions" class="ant-card-actions">
                  <a-icon type="setting" />
                  <a-icon type="delete" @click="del(item.fileid)" />
                </template>
                <a-card-meta :title="item.file_name" description></a-card-meta>
              </a-card>
            </a-row>
            <a-row type="flex" justify="end">
              <a-pagination
                :total="total"
                :show-total="(total) => `共 ${total} 条数据`"
                :page-size="pageSize"
                :default-current="page"
                @change="(page, pageSize) => this.changePage(page, pageSize)"
              />
            </a-row>
          </div>
        </a-layout-content>
        <f-footer></f-footer>
      </a-layout>
    </a-layout>
  </div>
</template>
<script>
import sider from "../../components/layout/Sider.vue";
import header from "../../components/layout/Header.vue";
import footer from "../../components/layout/Footer.vue";
const columns = [
  {
    title: "ID",
    dataIndex: "fileid",
  },
  {
    title: "缩略图",
    scopedSlots: { customRender: "adsimg" },
  },
  {
    title: "创建时间",
    dataIndex: "create_flie_time",
  },
  {
    title: "操作",
    scopedSlots: { customRender: "operation" },
  },
];

const data = [];
export default {
  metaInfo: {
    title: "媒体管理",
  },
  data() {
    return {
      data,
      columns,
      visible: false,
      addvisible: false,
      title: "",
      keyword: "",
      page: 1,
      pageSize: 10,
      total: 0,
      // pagination: {
      //   defaultPageSize: 10,
      //   total: 0,
      //   showTotal: total => `共 ${total} 条数据`,
      //   onChange: (page, pageSize) => this.changePage(page, pageSize) //点击页码事件
      // }
    };
  },
  components: {
    "f-header": header,
    "f-sider": sider,
    "f-footer": footer,
  },
  mounted() {
    this.$parent.tokenverify();
    this.getlst();
    this.setsiders();
  },
  methods: {
    showImg(e) {
      window.open(e, "_blank");
    },
    add() {
      this.$router.push("/Ads/addads");
    },

    edit(menu_id, title) {
      this.visible = true;
      this.menu_id = menu_id;
      this.title = title;
    },
    editmenu() {
      const url = "/Admin/Menu/editmenu";
      const paramObj = {
        token: localStorage.getItem("token"),
        menu_id: this.menu_id,
        title: this.title,
      };
      this.$server.sl("POST", url, paramObj).then((res) => {
        if (res.code == 1) {
          this.$message.success("修改成功");
          this.visible = false;
          this.getlst();
        } else if (res.code == 4001) {
          this.$router.push("/Auth/login");
          this.$message.warning("凭证失效，请重新登陆");
        } else {
          this.$message.warning(res.msg);
        }
      });
    },
    del(e) {
      const _this = this;
      _this.$confirm({
        title: "该操作不可逆，确定删除该记录?",
        okText: "是的",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          const url = "/Admin/file/DelFile";
          const paramObj = {
            fileid: e,
            token: localStorage.getItem("token"),
          };
          _this.$server.sl("GET", url, paramObj).then((res) => {
            if (res.code == 1) {
              _this.getlst();
              _this.$message.success("删除成功");
            } else if (res.code == 4001) {
              _this.$router.push("/Auth/login");
              _this.$message.warning("凭证失效，请重新登陆");
            } else {
              _this.$message.warning(res.msg);
            }
          });
        },
        onCancel() {},
      });
    },

    getlst() {
      const url = "/Admin/file/getFileList";
      const paramObj = {
        page: this.page,
        pageSize: this.pageSize,
        token: localStorage.getItem("token"),
      };
      this.$server.sl("GET", url, paramObj).then((res) => {
        if (res.code == 1) {
          this.data = res.data;
          this.total = res.count;
        } else if (res.code == 4001) {
          this.$router.push("/Auth/login");
          this.$message.warning("凭证失效，请重新登陆");
        } else {
          this.$message.warning("获取失败，请刷新重试");
        }
      });
    },
    //翻页
    changePage: function (page, pageSize) {
      this.page = page;
      this.pageSize = pageSize;
      if (this.issearch) {
        this.onSearch();
      } else {
        this.getlst();
      }
    },
    //菜单选中设置
    setsiders() {
      this.$store.commit("updateselectedKeys", "7");
    },
    onSearch() {},
  },
};
</script>
<style scoped>
#components-layout-demo-fixed-sider .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
.title {
  margin: 0 0 10px;
  font-size: 20px;
}
.picurl {
  height: 3rem;
}
.operation:first-child {
  margin-right: 1rem;
}
.img {
  width: 100%;
  height: 250px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
</style>